<!--

    Copyright 2020 StreamSets Inc.

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>StreamSets: Set Password</title>

  <style>
  body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 50px 40px;
  }
  label,
  small {
    display: block;
    margin: 0 0 6px;
  }
  input {
    display: block;
    width: 300px;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .text-muted{
    color: grey;
  }
  .invalid {
    display: block;
    color: #d9534f;
  }
  #form > div {
    display: block;
    margin: 0 0 20px 10px;
  }
  .intro {
    margin: 30px 0 !important;
  }
  #badParams,
  #goLogin {
    display: none;
  }
  button {
    margin-top: 20px;
    color: #fff;
    background-color: #375587;
    text-align: center;
    letter-spacing: 0.5px;
    font-size: 1rem;
    padding: 10px 15px;
    cursor: pointer;box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  }
  #userId {
    background-color: #F4F6F6;
  }
  </style>
  <link rel="icon" type="image/png" href="assets/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

  <img src="assets/logo.png" />

  <div id="form">
    <div class="intro">Please set your password for StreamSets Data Collector.</div>
    <div>
      <label>User Id</label>
      <input type="text" id="userId" readonly>
      <small id="userIdError" class="invalid"></small>
    </div>
    <div>
      <label>Password</label>
      <input type="password" id="pwd" autofocus
          autocomplete="new-password" minlength="6" maxlength="12">
      <small id="pwdError" class="invalid"></small>
      <small class="text-muted">Password must be 6-12 characters, and must not contain spaces.</small>
    </div>
    <div>
      <label>Password Verification</label>
      <input type="password" id="pwdVerif"
          autocomplete="new-password" minlength="6" maxlength="12">
      <small id="pwdVerifError" class="invalid"></small>
      <small class="text-muted">To confirm, type your password again.</small>
    </div>

    <div id="errorMsg" class="invalid"></div>

    <div>
      <button type="submit" onClick="javascript:submit()">Set Password</button>
    </div>
  </div>

  <div id="goLogin">
    Your password has been set. <br><br>You can now <a href="login.html">login to StreamSets Data Collector</a>.
  </div>

  <div id="badParams" class="invalid">
    This url is missing parameters. Please make sure it is correct.
  </div>

  <script>
    function getElem(id) {
      return document.getElementById(id);
    };
    function getFieldVal(id) {
      return getElem(id).value || '';
    };
    function setFieldVal(id, value) {
      return getElem(id).value = value;
    };
    function setError(id, value) {
      return getElem(id).innerHTML = value;
    };
    var urlParams = new URLSearchParams(window.location.search);
    var token = urlParams.get('token');
    var userId = urlParams.get('id');

    if(!token || !userId){
      getElem('form').style.display = 'none';
      getElem('badParams').style.display = 'block';
    } else {
      setFieldVal("userId", userId)
    }

    function validate(userId, pwd, pwdVerif) {
      var userIdError = '',
        pwdError = '',
        pwdVerifError = '';

      if(!userId) {
        userIdError = 'User Id is required.'
      }
      if(!pwd) {
        pwdError = 'Password is required.'
      } else if(pwd.length<6 || pwd.length>12) {
        pwdError = 'Password must be 6 to 12 characters long.';
      } else if(pwd.indexOf(' ')>-1) {
        pwdError = 'Password must not contain spaces.';
      }
      if(pwd !== pwdVerif) {
        pwdVerifError = 'Password and Password Verification must match.';
      }
      setError('userIdError', userIdError);
      setError('pwdError', pwdError);
      setError('pwdVerifError', pwdVerifError);

      return userIdError + pwdError + pwdVerifError === '';
    }

    function submit() {
      var userId = getFieldVal('userId'),
          pwd = getFieldVal('pwd'),
          pwdVerif = getFieldVal('pwdVerif');

      if(validate(userId, pwd, pwdVerif)) {
        var data = {
          data: {
            id: userId,
            resetToken: token,
            password: pwd
          },
          envelopeVersion: "1"
        };

        try {
          fetch('/public-rest/v1/users/setPassword', {
            method: "POST",
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-By': 'Data Collector'
            },
            cache: 'no-cache',
            body: JSON.stringify(data)
          }).then(function(res) {
            if(res.ok) {
              getElem('goLogin').style.display = 'block';
              getElem('form').style.display = 'none';
            } else {
              setError('errorMsg', res.status + ' - ' + res.statusText);
            }
          });
        }
        catch(err) {
          setError('errorMsg', JSON.stringify(err));
        }

      }
    }

  </script>

</body>
</html>
